<template>
  <el-table-column
    v-for="(item, index) in tableHeaders"
    :key="item.fieldConfigId"
    width="220"
    show-overflow-tooltip
    :fixed="item.fieldId === 'customer_name' && 'left'"
  >
    <template #default="{ row }">
      <!--   客户名称 start   -->
      <span v-if="item.fieldId === 'customer_name'" class="client-name" @click="handelClientName(row)">{{
        row.customer_name
      }}</span>
      <el-popover v-else-if="item.fieldId === 'mobile_code'" placement="right" width="210" trigger="click" :show-arrow="false">
        <template #reference>
          <div class="client-phone" @click="handelShowInfo(row)">
            <span>{{ row.mobileAllShow ? row.mobile_code : hidePhone(`${row.mobile_code}`) }}</span>
            <el-icon><PhoneFilled /></el-icon>
          </div>
        </template>
        <div class="client-info">
          <div class="client-info-item">
            <UserFilled />
            <span class="client-info-item__label">姓名</span>
            <span class="client-info-item__value">{{ contactPopover.customer_name }}</span>
          </div>
          <div class="client-info-item">
            <PhoneFilled />
            <span class="client-info-item__label">电话</span>
            <span class="client-info-item__value">{{ contactPopover.mobile_code }}</span>
          </div>
        </div>
      </el-popover>
      <!--   客户名称 end   -->
      <!--   图片/视频/文件/富文本 start   -->
      <template v-else-if="isFileComponents(item).value">
        <el-button v-if="isValue(item, row).value" @click="handelCheckData(row, item)" link type="primary">查看</el-button>
      </template>
      <!--   图片/视频/文件/富文本 end   -->
      <template v-else-if="item.fieldName === 'DateTime'">
        {{ filterTime(row[item.fieldId]).value }}
      </template>
      <span v-else> {{ row[item.fieldId] }}</span>
    </template>
    <template #header>
      <FilterTableHeader :tableHeaderData="tableHeaders[index]" :columnIndex="index" @handelFilterData="handelCustomFilter" />
    </template>
  </el-table-column>
</template>

<script setup>
import { computed, ref } from "vue";
import { dayjs } from "element-plus";
import { PhoneFilled, UserFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import FilterTableHeader from "../FilterTableHeader";
import { hidePhone } from "@/utils";
import { contactInfo, clientStatus } from "../../config";
import useComputedParams from "@/hooks/useComputedParams";

const props = defineProps({
  tableHeaders: {
    type: Array,
    default: () => []
  }
});
const router = useRouter();
const emit = defineEmits(["update:modelValue", "customFilter", "previewFile"]);

const contactPopover = ref({ ...contactInfo });
const handelShowInfo = data => {
  contactPopover.value = data ?? contactInfo;
};

const handelClientName = data => {
  const path = data.status === clientStatus.LOST ? "/client-lose-info" : "/client-info";
  router.push({
    path,
    query: {
      customerId: data.customer_id
    }
  });
};
const handelCustomFilter = data => {
  emit("customFilter", data);
};

/**
 * 过滤图片/视频/文件/富文本
 */
const cmps = ["VideoUpload", "ImageUpload", "FileUpload", "EditorInput"];
const fileFieldIds = computed(() => {
  return props.tableHeaders.filter(item => cmps.includes(item.fieldName)).map(item => item.fieldId);
});
const isFileComponents = useComputedParams(headerItem => {
  return fileFieldIds.value.includes(headerItem.fieldId);
});
const isValue = useComputedParams((headerItem, row) => {
  return !!row[headerItem.fieldId];
});
const handelCheckData = (row, headerItem) => {
  emit("previewFile", { row, headerItem });
};

const filterTime = useComputedParams(data => {
  return data ? dayjs(data).format("YYYY-MM-DD") : "";
});
</script>

<style scoped lang="scss">
.client-name {
  font-size: 14px;
  color: #007dff;
  line-height: 24px;
  text-decoration: underline;
  cursor: pointer;
}
.client-phone {
  i {
    margin-left: 11px;
    color: #007dff;
    cursor: pointer;
  }
}
.client-info {
  &-item {
    display: flex;
    align-items: center;
    padding: 8px 18px;
    font-size: 14px;
    line-height: 22px;
    svg {
      width: 12px;
      height: 12px;
    }
    &__label {
      margin: 0 10px 0 5px;
      color: #86909c;
    }
    &__value {
      color: #3d3d3d;
    }
    & + .client-info-item {
      border-top: 1px solid rgba(134, 144, 156, 0.2);
    }
  }
}
</style>
